<template>
	<div class="articleList">
		<el-card shadow="hover">
			<div class="resources-ictures mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="120px" class="demo-form-inline">
					<el-row>
						<el-col :span="7">
							<el-form-item prop="name" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.name" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item prop="startTime" label="创建时间" style="width: 100%">
								<DatePicker v-model:start="searchForm.startTime" v-model:end="searchForm.endTime" />
							</el-form-item>
							<el-form-item prop="endTime"></el-form-item>
						</el-col>
						<el-col :span="7">
							<div style="padding-left: 10px">
								<el-button type="primary" @click="init">搜索</el-button>
								<el-button @click="resetFrom">重置</el-button>
							</div>
						</el-col>
						<el-col :span="3">
							<div style="padding-left: 10px; text-align: right">
								<el-button type="success" @click="toAdd">新增文章</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form>
				<el-table :data="tableData" style="width: 100%" v-loading="loading">
					<el-table-column type="index" label="序号" width="60">
						<template #default="scope">
							<span>{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</span>
						</template>
					</el-table-column>
					<el-table-column label="封面">
						<template #default="scope">
							<Img :src="scope.row.imgUrl" style="width: 40px; height: 40px"></Img>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="名称" show-overflow-tooltip />
					<el-table-column label="分类" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ cateFormat(scope.row.catId) }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" show-overflow-tooltip>
						<template #default="scope">
							<span>{{ $filters.timeFormat(scope.row.createTime) }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="score" label="排序" show-overflow-tooltip> </el-table-column>
					<el-table-column label="状态">
						<template #default="scope">
							<MySwitch v-model="scope.row.showStatus" @change="changeStatus(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column label="是否显示在底部">
						<template #default="scope">
							<MySwitch v-model="scope.row.isShow" @change="changeStatusFoot(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="120px" align="center">
						<template #default="scope">
							<el-button type="primary" @click="toEdit(scope.row)" text>编辑</el-button>
							<el-popconfirm title="请确认是否删除？" @confirm="deleteArticel(scope.row.id)">
								<template #reference>
									<el-button type="danger" text>删除</el-button>
								</template>
							</el-popconfirm>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
					@size-change="onHandleSizeChange"
					@current-change="onHandleCurrentChange"
					class="mt15"
					:pager-count="5"
					:page-sizes="[10, 20, 30]"
					v-model:current-page="page.pageNum"
					background
					v-model:page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="page.total"
				>
				</el-pagination>
			</div>
		</el-card>
		<AddDialog v-model="addDialogVisible" :isAdd="isAdd" :itemInfo="itemInfo" @refresh="init" />
	</div>
</template>
<script setup name="ArticleList">
import { ElMessage } from 'element-plus';
import { useArticleApi } from '/@/api/article';
import { rules, useSearch, useAdd, useCateFormat } from './hook';
import DatePicker from '/@/components/common/datePicker/DatePicker.vue';
import AddDialog from './AddDialog.vue';
import MySwitch from '/@/components/base/MySwitch.vue';
import { deepCopy } from '/@/utils';

const { delArticle } = useArticleApi();

const defaultValue = ref(null);
const { page, searchForm, tableData, loading, init } = useSearch();
const { addDialogVisible, isAdd, itemInfo, toAdd, toEdit, changeStatus, changeStatusFoot } = useAdd();
const { cateFormat } = useCateFormat();
const formDataRef = ref();
const resetFrom = () => {
	formDataRef.value.resetFields();
	// searchForm.value = deepCopy(defaultValue.value);
};

const deleteArticel = async (id) => {
	let res = await delArticle(id);
	if (res.code !== 200) return;
	ElMessage.success('删除成功！');
	init();
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.current = val;
	init();
};
// 页面加载时
onMounted(() => {
	defaultValue.value = deepCopy(searchForm.value);
});
</script>
<style lang="scss" scoped></style>
